import { faker } from "@faker-js/faker";
import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip } from "recharts";
import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
import { IssueDistributionTooltip } from "./tooltip";

const template = { start: 1752080015446, failed: 20, bug: 6, script: 8, env: 4, todo: 4 };

const data = Array.from({ length: 60 }, (_, index) => ({
  start: template.start + index * 1000 * 60 * 60 * 24,
  failed: faker.number.int({ min: 10, max: 30 }),
  bug: faker.number.int({ min: 5, max: 10 }),
  script: faker.number.int({ min: 5, max: 10 }),
  env: faker.number.int({ min: 1, max: 5 }),
  todo: faker.number.int({ min: 1, max: 10 }),
}));

export function IssueDistributionChart() {
  return (
    <Card className="gap-2 xl:py-4 2xl:py-6">
      <CardHeader className="xl:px-4 2xl:px-6">
        <CardTitle className="text-sm">Issue distribution</CardTitle>
      </CardHeader>
      <CardContent className="h-full gap-2 xl:px-4 2xl:px-6">
        <ResponsiveContainer width="100%" height="100%" debounce={200}>
          <BarChart
            accessibilityLayer
            data={data}
            margin={{
              left: -4,
              right: -4,
              top: 0,
              bottom: 0,
            }}
          >
            <Tooltip content={<IssueDistributionTooltip />} />
            <CartesianGrid strokeDasharray="3 3" stroke="var(--accent)" />
            <Bar dataKey="todo" stackId="issue" fill="var(--chart-1)" />
            <Bar dataKey="env" stackId="issue" fill="var(--chart-2)" />
            <Bar dataKey="script" stackId="issue" fill="var(--chart-3)" />
            <Bar dataKey="bug" stackId="issue" fill="var(--chart-4)" />
          </BarChart>
        </ResponsiveContainer>
      </CardContent>
    </Card>
  );
}
